<template>
  <div class="app-container">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>报警历史</span>
        </div>
      </template>
      <div class="alarm-history">
        <el-table :data="historyList" style="width: 100%">
          <el-table-column prop="id" label="报警ID" />
          <el-table-column prop="deviceName" label="设备名称" />
          <el-table-column prop="alarmType" label="报警类型" />
          <el-table-column prop="level" label="级别">
            <template #default="scope">
              <el-tag
                :type="
                  scope.row.level === '高'
                    ? 'danger'
                    : scope.row.level === '中'
                    ? 'warning'
                    : 'info'
                "
              >
                {{ scope.row.level }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="time" label="报警时间" />
          <el-table-column prop="handleTime" label="处理时间" />
          <el-table-column prop="status" label="状态">
            <template #default="scope">
              <el-tag
                :type="scope.row.status === '已处理' ? 'success' : 'warning'"
              >
                {{ scope.row.status }}
              </el-tag>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref } from "vue";

const historyList = ref([
  {
    id: "AL001",
    deviceName: "1号变压器",
    alarmType: "温度过高",
    level: "高",
    time: "2024-01-19 14:30",
    handleTime: "2024-01-19 15:00",
    status: "已处理",
  },
  {
    id: "AL002",
    deviceName: "2号水泵",
    alarmType: "压力异常",
    level: "中",
    time: "2024-01-19 10:15",
    handleTime: "2024-01-19 11:30",
    status: "已处理",
  },
  {
    id: "AL003",
    deviceName: "3号发电机",
    alarmType: "振动异常",
    level: "低",
    time: "2024-01-18 16:45",
    handleTime: "2024-01-18 17:00",
    status: "已处理",
  },
]);
</script>

<style lang="scss" scoped>
.alarm-history {
  padding: 20px;
}
</style>
